<script setup lang="ts">
import UserAvatar from "@/components/user-avatar/index.vue";
import LogoutIcon from "@/components/icons/logout-icon.vue";

import { useDialog } from "naive-ui";

import { logout } from "@/api/module/auth.api.ts";
import { useRouter } from "vue-router";
import { LOGIN_ROUTE_NAME } from "@/router/routes/login.route.ts";

import type { UserModel } from "@/api/model/user.model.ts";

const router = useRouter();
const dialog = useDialog();

defineProps<{
    user: UserModel
}>();

function handleLogout() {
    dialog.warning({
        title: "登出",
        content: "你确定要退出登录吗？",
        positiveText: "退出登录",
        negativeText: "取消",
        transformOrigin: "center",
        onPositiveClick: () => {
            logout().then(() => {
                router.push({ name: LOGIN_ROUTE_NAME });
            });
        }
    });
}

</script>

<template>
    <div class="flex justify-between items-center">
        <!-- left -->
        <div class="flex gap-2 flex-grow overflow-hidden">
            <!-- 头像 -->
            <user-avatar :size="48" :qq="user.qq" class="flex-shrink-0"/>
            <!-- 信息 -->
            <div class="flex-grow flex flex-col justify-center gap-1 overflow-hidden">
                <h3 class="text-xl truncate">{{ user.nickname }}</h3>
                <span class="sys-username text-sm truncate">@{{ user.username }}</span>
            </div>
        </div>

        <!-- right -->
        <div class="flex-shrink-0">
            <!-- 退出登录 -->
            <n-button quaternary round type="error" size="large" @click="handleLogout">
                <template #icon>
                    <n-icon :size="26"><logout-icon/></n-icon>
                </template>
            </n-button>
        </div>
    </div>
</template>

<style scoped>
.sys-username {
    color: var(--sys-description-text-color);
}
</style>